<template>
  <div class="mobile-scheme-build">
    <Title
      v-slide-up
      title="建设内容"
      color="#0e0b31"
      size="16"
      bold="700"
      sub-title="Construction Content"
      sub-color="#878597"
      sub-size="14"
      left="27"
      block="#4580dd"
      block-width="2"
      block-pos="center"
    />
    <div class="build">
      <div
        v-slide-plus
        v-for="(item, index) in data.list"
        :key="index"
        class="build-item"
      >
        <img v-slide-plus :src="publicSrc(item.image)" />
        <div v-slide-up class="title line-1">{{ item.name }}</div>
        <div v-slide-up class="content line-3">{{ item.introduce }}</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { publicSrc } from "@/utils/common";
defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        list: "",
        image: "",
      };
    },
  },
});
</script>
<style lang="scss" scoped>
.mobile-scheme-build {
  width: 100%;
  background-color: #fff;
  padding: 1.25rem;
  box-sizing: border-box;
  .build {
    margin-top: 1.25rem;
    .build-item {
      padding: 1.25rem;
      height: auto;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #fff;
      border: 1px solid #e5e5e5;
      transition: all 0.3s;
      margin-bottom: 1.25rem;
      &:last-child {
        margin-bottom: 0;
      }
      img {
        width: 3.5rem;
        height: 3.5rem;
        margin: 1.25rem 0;
      }
      .title {
        font-size: 0.875rem;
        font-weight: 700;
        color: #000;
        text-align: center;
      }
      .content {
        font-size: 0.875rem;
        color: #808080;
        margin-top: 0.625rem;
        text-align: center;
      }
      &:active {
        background: linear-gradient(135deg, #fff 0%, #2a82e4 100%);
        // box-shadow: 0 0.625rem 0.9375rem rgba(42, 130, 228, 0.25);
        // animation: toRight 0.3s ease;
      }
    }
  }
}
</style>
